<template>
  <h1>一个人的信息</h1>
  <h1>姓：<input type="text" v-model="person.firstName" /></h1>
  <h1>名：<input type="text" v-model="person.lastName" /></h1>
  <h1>全名：{{ person.fullName }}</h1>
  <h1>修改全名：<input type="text" v-model="person.fullName" /></h1>
</template>

<script>
import { reactive, computed } from "vue";

export default {
  name: "Demo",
  setup() {
    //定义数据
    const person = reactive({
      firstName: "周",
      lastName: "露",
    });

    // //计算属性---简写形式
    // person.fullName = computed(() => {
    //   return person.firstName + "-" + person.lastName;
    // });
    //计算属性---完整写法
    person.fullName = computed({
      get() {
        return person.firstName + "-" + person.lastName;
      },
      set(value) {
        const nameArr = value.split("-");
        person.firstName = nameArr[0];
        person.lastName = nameArr[1];
      },
    });

    //返回对象
    return {
      person,
    };
  },
};
</script>

<style>
</style>
